<template>
  <div class="page-Body">
    <h2 class="page-title">社群审核列表</h2>
    <el-table
      :data="tableData"
      border
      empty-text="暂无数据"
      stripe
      show-header
      :header-cell-style="{ background: '#e7e1fb' }"
      v-loading="loading"
      element-loading-text="Loading..."
      style="width: 100%"
      size="default"
      max-height="650px"
    >
      <el-table-column prop="" type="selection" width="55" />
      <el-table-column prop="communityId" label="序号" width="240" />
      <el-table-column prop="name" label="社群名称" width="240" />
      <el-table-column prop="typeName" label="社群分类" width="200" />
      <el-table-column prop="tags" label="社群标签" width="200" v-slot="scope">
        <el-tag
          v-for="(item, index) in scope.row.tags"
          :key="index"
          style="margin-right: 5px"
        >
          {{ item }}
        </el-tag>
      </el-table-column>
      <el-table-column prop="releaseTime" label="发起时间" width="240" />
      <el-table-column prop="founderName" label="社群创建人" width="180" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
        v-slot="scope"
      >
        <el-button
          link
          type="primary"
          size="small"
          @click="DetailsClick(scope.row.communityId)"
        >
          查看详情
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click="PassThrough(scope.row.communityId)"
        >
          通过
        </el-button>
        <el-button
          link
          type="danger"
          size="small"
          @click="Refuse(scope.row.communityId)"
        >
          拒绝
        </el-button>
      </el-table-column>
    </el-table>
    <!-- 查看详情对话框 -->
    <AssociaTionDetails_Dialog
      :DialogDetails="DialogDetails"
      @cancel="CloseDetailsDialog"
      @carry="PassThrough"
      @refuse="Refuse"
      :DetailsId="DetailsId"
    />
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout=" total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {
  getAssociationList,
  AdoptAssociationList,
  RefuseAssociationList,
} from '@/api/PlatformReview/association';
import AssociaTionDetails_Dialog from '@/components/PlatformReview/AssociaTionDetails_Dialog.vue';
import { onMounted, ref } from 'vue';
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const tableData = ref([]);
const loading = ref(true);
const DialogDetails = ref(false);
const DetailsId = ref('');
// 获取社群审核列表
const AssociaTionList = async () => {
  loading.value = true;
  const res = await getAssociationList({
    current: currentPage.value,
    size: pageSize.value,
    query: {},
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
// 分页逻辑
const handleSizeChange = (val) => {
  pageSize.value = val;
  AssociaTionList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  AssociaTionList();
};
// 查看详情
const DetailsClick = (id) => {
  DetailsId.value = id;
  DialogDetails.value = true;
};
// 通过
const PassThrough = async (id) => {
  const res = await AdoptAssociationList({
    communityId: id || DetailsId.value,
  });
  if (res.data.code === 200) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: res.data.msg,
      type: 'success',
    });
    AssociaTionList();
    DialogDetails.value = false;
  } else {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: res.data.msg,
      type: 'warning',
    });
    DialogDetails.value = false;
  }
};
// 拒绝
const Refuse = async (id) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.prompt('请输入拒绝原因', '拒绝', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern: /\S+/, // 使用正则表达式，\S 表示非空白字符，+ 表示至少一个,
    inputErrorMessage: '必填原因',
  })
    .then(async ({ value }) => {
      const res = await RefuseAssociationList({
        communityId: id || DetailsId.value,
        rejectReason: value,
      });
      if (res.data.code === 200) {
        // eslint-disable-next-line no-undef
        ElMessage({
          type: 'success',
          message: res.data.msg,
        });
        AssociaTionList();
      } else {
        // eslint-disable-next-line no-undef
        ElMessage({
          type: 'warning',
          message: res.data.msg,
        });
      }
      DialogDetails.value = false;
    })
    .catch(() => {});
};
// 查看详情对话框
const CloseDetailsDialog = () => {
  DialogDetails.value = false;
};
// 渲染列表数据
onMounted(() => {
  AssociaTionList();
});
</script>

<style lang="scss" scoped></style>
